<template>
    <div id="home">
        <div class='msg'>
            <!-- <message :messageList="messageList"></message> -->
            <!-- <iframe allowtransparency="true" frameborder="0" width="524" height="28" scrolling="no" src="//tianqi.2345.com/plugin/widget/index.htm?s=3&z=1&t=0&v=0&d=2&bd=0&k=&f=00ffff&ltf=009944&htf=cc0000&q=1&e=1&a=1&c=54511&w=524&h=28&align=center"></iframe> -->
        </div>
        <div class='top'>
            <div class="col1">
                <div class="col1-row1 box">
                    
                </div>
                <div class="col1-row2 box">
                   
                </div>
            </div>
            <div class="col2 box">
                <!-- <eMap></eMap> -->
            </div>
            <div class="col3">
                <div class="col3-row1 box">
                    <div class='col3-row1-col1'>
                        
                    </div>
                    <div class='col3-row1-col2'>
                       
                    </div>
                    <div class='col3-row1-col3'>
                       
                    </div>
                </div>
                <div class="col3-row2">
                    <div class='col3-row2-col1 box'>
                       
                    </div>
                    <div class='col3-row2-col2 box'>
                        
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="col1 box">
                
            </div>
            <div class="col2 box">
               
            </div>
            <div class="col3 box">
                
            </div>
        </div>
    </div>
</template>
<script>
export default {
    components:{
       
    },
    data(){
        return{
            yearOptions:[
                {label:'2019',value:"2019"},
                {label:'2018',value:"2018"},
                {label:'2017',value:"2017"},
                {label:'2016',value:"2016"},
                {label:'2015',value:"2015"},
            ],
            monthOptions:[
                {label:'01',value:"01"},
                {label:'02',value:"02"},
                {label:'03',value:"03"},
                {label:'04',value:"04"},
                {label:'05',value:"05"},
                {label:'06',value:"06"},
                {label:'07',value:"07"},
                {label:'08',value:"08"},
                {label:'09',value:"09"},
                {label:'10',value:"10"},
                {label:'11',value:"11"},
                {label:'12',value:"12"},
            ],

            messageList:[
            "昨日08时至11时00分，全省有297个县(市)发生降雨，最大降雨出现在 渭南市阳山县塘崆站，累计雨量为98.0 毫米 ",
            "今日陕北晴天转多云 关中陕南多云间阴天 陕南部分地方有小雨或阵雨",
            "今日陕北多云 关中、陕南部分地方有降水",
            "未来三天全省大部地区多云间晴天",
            ]
            
        }
    },
    methods:{
        
    },

}
</script>
<style lang="scss" scoped>
#home{
    height: 100%;
    display: flex;
    flex-direction: column;
    background:url(~Public/img/home/background.png) no-repeat center;
    background-size: 101% 101%;
    
    .msg{
        height:30px;
        flex-grow: 0;
        margin:0px;
        margin-bottom: 0px;
        margin-top: 10px;
        display: flex;
        justify-content: center;
        //background: rgba(200,200,200,0.2)
    }
    .top{
        height:66vh;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow: hidden;
        .col1{
            flex:20%;
            display: flex;
            flex-direction: column;
            .col1-row1{
                flex: 50%;
                margin-bottom: 0px;
            }
            .col1-row2{
                flex: 50%;
            }
        }
        .col2{
            flex:40%;
            margin-right:0px;
            margin-left: 0px;
        }
        .col3{
            flex:40%;
            display: flex;
            flex-direction: column;
            .col3-row1{
                flex: 50%;
                flex-grow: 0;
                display: flex;
                flex-direction: row;
                margin-bottom: 0px;
                .col3-row1-col1{
                    flex: 1;
                }
                .col3-row1-col2{
                    flex: 1;
                }
                .col3-row1-col3{
                    flex: 1;
                }
            }
            .col3-row2{
                flex: 50%;
                flex-grow: 0;
                display: flex;
                flex-direction: row;
                overflow: hidden;
                .col3-row2-col1{
                    flex: 50%;
                    flex-grow: 0;
                    margin-right: 0px;
                }
                .col3-row2-col2{
                    flex: 50%;
                    flex-grow: 0;
                }
            }

        }

    }
    .bottom{
        height:34vh;
        display: flex;
        overflow: hidden;
        .col1{
            flex: 1;
            margin-top: 0px;
        }
        .col2{
            flex: 1;
             margin-top: 0px;
             margin-left: 0px;
             margin-right: 0px;
        }
        .col3{
            flex: 1;
            margin-top: 0px;
        }

    }
}

.box{
    border:1px solid rgba(17,224,236,0.26);
   // background:url(public/imgs/home/border.png) no-repeat center;
    background-size: 100% 100%;
    padding:1px;
    margin: 10px;
    background-color: rgba(27,48,75,0.6);
    position: relative;
    &:before{
        content: '';
        display: block;
        position: absolute;
        top: 0px;
        left: 0px;
        width:10px;
        height: 10px;
        z-index: 2;
        border-top:2px solid #11e0ec;
        border-left:2px solid #11e0ec;
    }
    &:after{
        content: '';
        display: block;
        position: absolute;
        right: 0px;
        bottom: 0px;
        width:10px;
        height: 10px;
        z-index: 2;
        border-right:2px solid #11e0ec;
        border-bottom:2px solid #11e0ec;
    }
}

</style>





